<script setup>
import { newRandomUid } from "@/utils";

const props = defineProps({
  config: {
    type: Object,
    required: true,
  },
  name: {
    type: String,
    default: "",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  info: {
    type: Object,
  },
});

const emits = defineEmits(["update:config", "change", "append"]);

const form = ref({
  $show: false,
  $mode: "popup",
  $removeable: true,
});

const detail = computed({
  get: () => {
    return Object.assign({}, form.value, props.config);
  },
  set: (val) => {
    emits("update:config", val);
    emits("change", val);
  },
});

const initConfig = () => {
  if (!detail.value.$pageFlag) {
    detail.value.$pageFlag = `Lottery-${newRandomUid()}`;
  }
  if (props.info.children) {
    let chance = props.info.children.find(
      (item) => item.type === "LotteryChance"
    );
    if (!chance) {
      emits("append", {
        uid: newRandomUid(),
        type: "LotteryChance",
        name: "抽奖机会",
        pageConfig: {},
      });
    }
    let pool = props.info.children.find((item) => item.type === "PrizePool");
    if (!pool) {
      emits("append", {
        uid: newRandomUid(),
        type: "PrizePool",
        name: "奖池",
        pageConfig: {},
      });
    }
  }
};

const onChange = (val) => {
  detail.value = detail.value;
};

onMounted(() => {
  onChange();
  nextTick(() => {
    initConfig();
  });
});
</script>
<template>
  <el-form :model="detail" label-width="auto" :disabled="disabled"> </el-form>
</template>
